<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="80px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="房型编码" prop="roomCode">
            <el-input v-model="dataForm.roomCode" placeholder="房型编码"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="房型名称" prop="roomName">
            <el-input v-model="dataForm.roomName" placeholder="房型名称"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="最大人数" prop="maxNum">
            <el-input v-model="dataForm.maxNum" placeholder="最大人数"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="房间大小" prop="roomSize">
            <el-input v-model="dataForm.roomSize" placeholder="房间大小"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所在楼层" prop="roomFloor">
            <el-input v-model="dataForm.roomFloor" placeholder="房间所在楼层"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="床型" prop="bedPad">
            <el-input v-model="dataForm.bedPad" placeholder="床型"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="床宽" prop="bedWidth">
            <el-input v-model="dataForm.bedWidth" placeholder="床宽"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="房间描述" prop="roomContent">
        <el-input type="textarea" :rows="2" v-model="dataForm.roomContent" placeholder="房间描述"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="房型状态" prop="roomStatus">
            <el-select style="width:100%" v-model="dataForm.roomStatus" placeholder="请选择房型状态">
              <el-option
                v-for="item in roomStatuss"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="宽带服务" prop="internet">
            <el-select style="width:100%" v-model="dataForm.internet" placeholder="请选择宽带服务">
              <el-option
                v-for="item in internets"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="窗户情况" prop="windows">
        <el-select style="width:100%" v-model="dataForm.windows" placeholder="请选择窗户情况">
          <el-option v-for="item in windows" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="窗景描述" prop="windowInfo">
        <el-input v-model="dataForm.windowInfo" placeholder="窗景描述"></el-input>
      </el-form-item>
      <el-form-item label="不利因素" prop="windowBad">
        <el-input v-model="dataForm.windowBad" placeholder="窗户不利因素"></el-input>
      </el-form-item>
      <el-form-item label="加床情况" prop="upBed">
        <el-input v-model="dataForm.upBed" placeholder="加床情况"></el-input>
      </el-form-item>
      <el-form-item label="最大儿童数" prop="maxChild">
        <el-input v-model="dataForm.maxChild" placeholder="最大儿童人数"></el-input>
      </el-form-item>
      <el-form-item label="房型设施" prop="houseType">
        <el-input type="textarea" :rows="2" v-model="dataForm.houseType" placeholder="房型设施"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="人工校准" prop="manualVerify">
            <el-switch v-model="dataForm.isCorrect" :active-value="1" :inactive-value="0"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="自动下单" prop="automaticOrder">
            <el-switch v-model="dataForm.isAutoOrder" :active-value="1" :inactive-value="0"></el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="数据来源" prop="dataFrom">
        <el-radio-group v-model="dataForm.dataFrom">
          <el-radio :label="1">携程</el-radio>
          <el-radio :label="2">美团</el-radio>
          <el-radio :label="3">官网</el-radio>
          <el-radio :label="4">其他</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        id: 0,
        hotelCode: '',
        roomCode: '',
        roomName: '',
        maxNum: '',
        roomSize: '',
        roomFloor: '',
        bedPad: '',
        bedWidth: '',
        roomContent: '',
        windows: '',
        windowInfo: '',
        internet: '',
        windowBad: '',
        upBed: '',
        roomStatus: '',
        maxChild: '',
        houseType: '',
        isCorrect: '',
        isAutoOrder: '',
        dataFrom: ''
      },
      windows: [
        { id: 0, name: '无窗' },
        { id: 1, name: '有窗' },
        { id: 2, name: '部分有窗' },
        { id: 3, name: '暗窗' },
        { id: 4, name: '其他' }
      ],
      internets: [
        { id: 'A', name: '无宽带' },
        { id: 'B', name: '免费宽带' },
        { id: 'C', name: '收费宽带' },
        { id: 'D', name: '部分收费宽带' },
        { id: 'E', name: '其他' }
      ],
      roomStatuss: [
        { id: 0, name: '正常' },
        { id: -1, name: '删除' },
        { id: -2, name: '停售' }
      ],
      dataRule: {
        roomCode: [
          { required: true, message: '房型编码不能为空', trigger: 'blur' }
        ],
        roomName: [
          { required: true, message: '房型名称不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init(id) {
      this.dataForm.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(`/ht/htphysicalroom/info/${this.dataForm.id}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.hotelCode = data.htPhysicalRoom.hotelCode
              this.dataForm.roomCode = data.htPhysicalRoom.roomCode
              this.dataForm.roomName = data.htPhysicalRoom.roomName
              this.dataForm.maxNum = data.htPhysicalRoom.maxNum
              this.dataForm.roomSize = data.htPhysicalRoom.roomSize
              this.dataForm.roomFloor = data.htPhysicalRoom.roomFloor
              this.dataForm.bedPad = data.htPhysicalRoom.bedPad
              this.dataForm.bedWidth = data.htPhysicalRoom.bedWidth
              this.dataForm.roomContent = data.htPhysicalRoom.roomContent
              this.dataForm.windows = data.htPhysicalRoom.windows
              this.dataForm.windowInfo = data.htPhysicalRoom.windowInfo
              this.dataForm.internet = data.htPhysicalRoom.internet
              this.dataForm.windowBad = data.htPhysicalRoom.windowBad
              this.dataForm.upBed = data.htPhysicalRoom.upBed
              this.dataForm.roomStatus = data.htPhysicalRoom.roomStatus
              this.dataForm.maxChild = data.htPhysicalRoom.maxChild
              this.dataForm.houseType = data.htPhysicalRoom.houseType
              this.dataForm.isCorrect = data.htPhysicalRoom.isCorrect
              this.dataForm.isAutoOrder = data.htPhysicalRoom.isAutoOrder
              this.dataForm.dataFrom = data.htPhysicalRoom.dataFrom
            }
          })
        }
      })
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/ht/htphysicalroom/${!this.dataForm.id ? 'save' : 'update'}`),
            method: 'post',
            data: this.$http.adornData({
              'id': this.dataForm.id || undefined,
              'hotelCode': this.dataForm.hotelCode,
              'roomCode': this.dataForm.roomCode,
              'roomName': this.dataForm.roomName,
              'maxNum': this.dataForm.maxNum,
              'roomSize': this.dataForm.roomSize,
              'roomFloor': this.dataForm.roomFloor,
              'bedPad': this.dataForm.bedPad,
              'bedWidth': this.dataForm.bedWidth,
              'roomContent': this.dataForm.roomContent,
              'windows': this.dataForm.windows,
              'windowInfo': this.dataForm.windowInfo,
              'internet': this.dataForm.internet,
              'windowBad': this.dataForm.windowBad,
              'upBed': this.dataForm.upBed,
              'roomStatus': this.dataForm.roomStatus,
              'maxChild': this.dataForm.maxChild,
              'houseType': this.dataForm.houseType,
              'isCorrect': this.dataForm.isCorrect,
              'isAutoOrder': this.dataForm.isAutoOrder,
              'dataFrom': this.dataForm.dataFrom
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  }
}
</script>
